{% load i18n %}

{% comment %}
content of files that can be viewed online shows here.
For details please refer to 'snippets/file_content_js.html'.
{% endcomment %}
<div id="file-view" class="flex-auto ov-auto {% if filetype == 'Image' or filetype == 'SVG' and not err %}d-flex{% endif %}">
    {% include 'snippets/file_encoding.html' %}
    {% if not err %}
        {% if filetype == 'Text' or filetype == 'Markdown' %}
            {% ifnotequal file_content None %}
                {% if filetype == 'Text' %}
                <textarea id="docu-view" class="vh">{{ file_content|escape }}</textarea>
                {% endif %}

                {% if filetype == 'Markdown' %}
                <div id="md-view" class="article"></div>
                {% endif %}
            {% endifnotequal %}
        {% endif %}

        {% if filetype == 'Image' %}
            <div class="image-file-view flex-1">
            {% if from_shared_dir %}
                {% if img_prev %}
                <a href="?p={{img_prev|urlencode}}" id="img-prev" title="{% trans 'you can also press ← ' %}"><span class="icon-chevron-left"></span></a>
                {% endif %}
                {% if img_next %}
                <a href="?p={{img_next|urlencode}}" id="img-next" title="{% trans 'you can also press → ' %}"><span class="icon-chevron-right"></span></a>
                {% endif %}
            {% endif %}
            <span class="loading-icon"></span>
            <img src="" alt="{{ file_name }}" id="image-view" class="hide" />
            </div>
        {% endif %}

        {% if filetype == 'SVG' %}
            <div class="image-file-view flex-1">
                <span class="loading-icon"></span>
                <img src="{{raw_path}}" alt="{{ file_name }}" id="svg-view" class="hide" />
            </div>
        {% endif %}

        <!-- only for xmind thumb -->
        {% if filetype == 'XMind' %}
            <div class="image-file-view flex-1" style="text-align: center;">
                <img src="{{raw_path}}" alt="{{ file_name }}" id="xmind-view" />
            </div>
        {% endif %}

        {% if filetype == 'SpreadSheet' %}
            {% include 'snippets/spreadsheet_convert_html.html' %}
        {% endif %}

        {% if filetype == 'Document' or filetype == 'PDF' %}
        {% include 'snippets/pdf_html.html' %}
        {% endif %}
    {% else %}
    <div id="file-view-tip">
        {% if err != 'File preview unsupported' %}
            <p class="error">{{ err }}</p>
        {% else %}
            <p>{% trans "Online view is not applicable to this file format" %}</p>
        {% endif %}
    </div>
    {% endif %}
</div>
